import { Table } from 'antd';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const ProjectList = () => {
  const navigate = useNavigate();
  const [projects] = useState([
    {
      id: 1,
      name: '示例项目1',
      status: '进行中',
      startDate: '2025-01-01',
      endDate: '2025-12-31',
    },
    {
      id: 2,
      name: '示例项目2',
      status: '已完成',
      startDate: '2025-01-01',
      endDate: '2025-06-30',
    },
  ]);

  const columns = [
    {
      title: '项目名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '开始日期',
      dataIndex: 'startDate',
      key: 'startDate',
    },
    {
      title: '结束日期',
      dataIndex: 'endDate',
      key: 'endDate',
    },
  ];

  const handleRowClick = (record) => {
    navigate(`/projects/${record.id}`);
  };

  return (
    <div>
      <h2>项目列表</h2>
      <Table 
        dataSource={projects} 
        columns={columns} 
        rowKey="id"
        onRow={(record) => ({
          onClick: () => handleRowClick(record),
          style: { cursor: 'pointer' }
        })}
      />
    </div>
  );
};

export default ProjectList;
